<template>
  <div
    class="
      w-8/12
      bg-gray-50
      mt-8
      pb-20
      rounded-lg
      flex flex-col
      items-center
      shadow-2xl
    "
  >
    <!-- 首图 -->
    <img
      class="w-full h-96 rounded-t-lg shadow-2xl"
      :src="articleImage"
    />

    <div
      class="
        w-full
        bg-white
        rounded-lg
        shadow-2xl
        flex-col flex
        items-center
        px-16
        py-20
        space-y-8
      "
    >
      <!-- 标签 -->
      <div class="w-full flex space-x-3">
        <el-tag>Java</el-tag>
        <el-tag type="success">Vue</el-tag>
        <el-tag type="info">MySql</el-tag>
        <el-tag type="warning">Redis</el-tag>
        <el-tag type="danger">Docker</el-tag>
      </div>
      <!-- 标题 -->
      <div class="w-full flex text-3xl subpixel-antialiased font-bold">
        {{articleTitle}}
      </div>
      <!-- 作者信息 -->
      <div class="w-full flex justify-between border-b-2 pb-5">
        <!-- 头像 -->
        <div class="flex items-center">
          <div class="block">
            <el-avatar :size="60" :src="authorAvatar"></el-avatar>
          </div>
          <div class="flex flex-col ml-5">
            <p>Hello</p>
            <p>World</p>
          </div>
        </div>
        <div>Other</div>
      </div>
      <!-- 文章内容 -->
      <div class="flex border-b-2 pb-12">
        <div class="prose prose-lg" v-html="dqarticleContent"></div>
      </div>
      <!-- 点赞等 -->
      <div class="flex flex-col items-center pt-10 border-b-2 pb-20">
        <img
          class="w-10 h-10"
          src=""
        />
        <!-- 点赞数量或头像 -->
        <div>{{likeNum}}</div>
      </div>
      <!-- 评论 -->
      <div class="flex flex-col w-full">
        <div class="w-full flex flex-row">
          <p class="text-3xl subpixel-antialiased font-bold">发表评论</p>
        </div>
        <!-- 标题和类型 -->
        <div class="flex flex-row justify-around pt-5 space-x-5 px-2">
          <div class="w-full w-7/12">
            <el-input
              placeholder="请输入文章标题"
            ></el-input>
          </div>
          <div class="w-5/12">
            <el-select
              style="width: 350px"
              v-model="value1"
              multiple
              placeholder="请选择文章标签"
            >
              <el-option
                v-for="item in $store.state.articleTags"
                :key="item.tagId"
                :label="item.tagName"
                :value="item.tagId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 文章内容 -->
        <div class="flex w-full mt-5 px-2">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            show-word-limit
            maxlength="255"
          >
          </el-input>
        </div>
        <!-- 文章首图 -->
        <div class="flex w-full mt-6 px-2">
          <el-input placeholder="请输入文章首图的链接"> </el-input>
        </div>
        <!-- 发表评论的按钮 -->
        <div class="flex w-full flex-row px-2 mt-8 mb-8">
          <el-button type="primary">发表文章</el-button>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="flex flex-col w-full px-3">
        <!-- 自定义评论组件 -->
        <comment-bar></comment-bar>
      </div>
      <!-- 相关帖子栏 -->
      <div
        class="
          flex flex-row
          w-full
          bg-red-50
          shadow-2xl
          rounded-sm
          items-center
          px-8
          h-20
        "
      >
        <div class="font-bold">相关文章</div>
      </div>
      <!-- 相关帖子 -->
      <div class="flex flex-row justify-between w-full space-x-7 pt-8">
        <about-components></about-components>
        <about-components></about-components>
        <about-components></about-components>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
// import marked from 'marked'
import MarkDownIt from "markdown-it";
import AboutComponents from "./AboutComponents.vue";
import { requests } from "../../network/request";
import CommentBar from "./CommentBar.vue"

// import Articles from '../Articles.vue';
export default {
  name: "ArticleBackGround",
  data() {
    return {
      articleTitle: "",
      avatarUrl: "null",
      articleContent:
        "# Marked in the browser\n\nRendered by **marked**.\n\n`java`",
      articleImage: "",
      updateTime: '',
      typeName: '',
      authorNickname: '',
      authorAvatar: '',
      email: '',
      avatar: '',
      articleTags: {},
      likeNum: 0,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: [],
      value2: [],
    };
  },
  computed: {
    dqarticleContent: function () {
      const md = new MarkDownIt();
      const conttent = md.render(this.articleContent);
      // console.log(marked(this.articleContent,{ sanitize:true }));
      return conttent;
    },
  },
  mounted: function () {
    let articleId = this.$route.params.articleid
    //这里是route!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    //获得参数
    console.log(this.$route.params.articleid);
    //获得文章的数据
    requests({
      url: "dqarticle/superlist?articleId=" + this.$route.params.articleid,
      method: "get",
    }).then((res) => {
      if (res.data.code == 200) {
        //查询成功
        //赋值
        let data = res.data.data.list[0]
        let tags = data.articleTags

        this.articleTitle = data.articleTitle
        this.articleContent = data.articleContent
        this.articleImage = data.articleImage
        this.authorNickname = data.authorNickname
        this.authorAvatar = data.avatar

        if(tags[0].tagId == null){
          //文章没有标签
          console.log('文章没有标签');
        }else{
          this.articleTags = tags
        }
      }
    })
    //获得文章点赞的数量
    requests({
      url: 'dqlike/getlikes/'+this.$route.params.articleid,
      method: 'get'
    }).then(res => {
      console.log('点赞的数量'+res.data.data);
      this.likeNum = res.data.data
    })
    //从全局获取文章标签
    // this.options = this.$store.state.articleTags
    //获取此文章所有的评论
    requests({
      url: 'dqcomment/dqarticle/'+articleId,
      method: 'get'
    }).then(res => {
      console.log("文章根评论");
      console.log(res.data);
      if(res.data.code == 400){
        console.log('此文章没有评论');
      }
      if(res.data.code == 200) {
        console.log(res.data);
        //获取评论成功
      }
    })
  },
  components: {
    AboutComponents,
    CommentBar
    // Articles
  },
};
</script>
<style scoped>
</style>